@import url(./base.less);

@rootSize: 37.5rem;

body {
  padding: 0 (15 / @rootSize);
}
.title {
  display: flex;
  height: (46 / @rootSize);
  align-items: center;
  justify-content: space-between;
  p {
    font-size: (16 / @rootSize);
  }
  .search {
    background-color: #f7f7f7;
    border-radius: (16 / @rootSize);
    input {
      background: url(../icons/footer_2_default.png) no-repeat;
      background-size: (16 / @rootSize) (16 / @rootSize);
      height: (32 / @rootSize);
      width: (250 / @rootSize);
      border-radius: (16 / @rootSize);
      border: none;
      padding-left: (30 / @rootSize);
      background-position: (10 / @rootSize) center;
      box-shadow: (5 / @rootSize) (5 / @rootSize) (10 / @rootSize) rgba(0, 0, 0, .1) ;
      outline: none;
      &::placeholder {
        color: #a4a4a4;
      }
    }
  }
  img {
    height: (17 / @rootSize);
    width: (17 / @rootSize);
  }
}
.banner {
  padding: (10 / @rootSize) 0;
  height: (155 /  @rootSize);
  ul {
    li {
      img {
        height: (130 / @rootSize);
        box-shadow: (5 / @rootSize) (5 / @rootSize) (10 / @rootSize) rgba(0, 0, 0, .1) ;
      }
    }
  }
  p {
    display: flex;
    justify-content: center;
    span {
      width: (8 / @rootSize);
      margin-right: (8 / @rootSize);
      margin-top: (8 / @rootSize);
    }
  }
}
.state {
  display: flex;
  justify-content: space-between;
  height: (118 / @rootSize);
  padding: 0 (3 / @rootSize);
  img {
    height: (70 / @rootSize);
    margin-top: (12 / @rootSize);
    margin-bottom: (36 / @rootSize);
    box-shadow: (5 / @rootSize) (5 / @rootSize) (10 / @rootSize) rgba(0, 0, 0, .1) ;
  }
}
.goods {
  h4 {
    display: flex;
    justify-content: space-between;
    
    img {
      height: (15 / @rootSize);
      margin-top: (10 / @rootSize);
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin-top: (20 / @rootSize);
    margin-bottom: (30 / @rootSize);
    img {
      height: (115 / @rootSize);
      box-shadow: (5 / @rootSize) (5 / @rootSize) (10 / @rootSize) rgba(0, 0, 0, .1) ;
    }
    .text {
      font-size: (11 / @rootSize);
      margin-top: (12 / @rootSize);
      h5 {
        font-size: (13 / @rootSize);
        color: #101010;
        margin-bottom: (8 / @rootSize);
      }
      span {
        color: #aaa;
       
      }
      p {
        color: #f5a116;
        margin-top: (12 / @rootSize);
      }
    }
  }
}
.pic {
 img {
  width: 100%;
  height: (56 / @rootSize);
 }
  box-shadow: (5 / @rootSize) (5 / @rootSize) (10 / @rootSize) rgba(0, 0, 0, .1) ;
}
.recommend {
  margin-top: (30 / @rootSize);
  .header {
    display: flex;
    height: (25 / @rootSize);
    align-items: flex-end;
    justify-content: space-between;
    .method {
      font-size: (14 / @rootSize);
      ul {
        display: flex;
        li {
          height: (20 / @rootSize);
          margin-left: (20 / @rootSize);
          padding-bottom: (3 / @rootSize);
          &:hover {
            border-bottom: 2px solid blue;
          }
          a {
            display: block;
            height: 100%;
            color: #999;
            &:hover {
              color: #393939;
            }
          }
        }
      }
    }
  }
  .main {
    margin-top: (25 / @rootSize);
    ul {
      li {
        display: flex;
        margin-bottom: (10 / @rootSize);
        .left {
         img {
          height: (80 / @rootSize);
          margin-right: (10 / @rootSize);
          box-shadow: (5 / @rootSize) (5 / @rootSize) (10 / @rootSize) rgba(0, 0, 0, .1) ;
         }
        }
        .right {
         h5 {
          font-size: (13 / @rootSize);
          margin-bottom: (8 / @rootSize);
         }
         p {
          margin-bottom: (5 /  @rootSize);
          font-size: (12 / @rootSize);
          color: #ccc;
          span {
            color: #f5a116;
            font-size: (13 / @rootSize);
          }
         }
         .tu {
          display: flex;
         i {
          display: block;
          height: (15 / @rootSize);
          width: (50 / @rootSize);
          border: 1px solid #ccc;
          font-size: (12 / @rootSize);
          color: #ccc;
          text-align: center;
          margin-right: (10 / @rootSize);
          margin-bottom: (8 / @rootSize);
          line-height: (15 / @rootSize);
         }
        }
        }
      }
    }
  }
  .more {
    a {
      display: block;
      margin: 0 auto;
      width: (260 / @rootSize);
      height: (38 / @rootSize);
      color: #b8b8b8;
      background-color: #f2f2f3;
      border-radius: (19 / @rootSize);
      font-size: (16 / @rootSize);
      text-align: center;
      line-height: (38 / @rootSize);
    }
  }
}
.footer {
  margin-top: (25 / @rootSize);
  margin-bottom: (62 / @rootSize);
  img {
    height: (85 / @rootSize);
    width: 100%;
    box-shadow: (5 / @rootSize) (5 / @rootSize) (10 / @rootSize) rgba(0, 0, 0, .1) ;
  }
}
.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: (50 / @rootSize);
  background-color: #fff;
  ul {
    display: flex;
    justify-content:space-around;
    li {
      text-align: center;
      color: #ccc;
      span {
        font-size: (20 / @rootSize);
      }
      p {
        font-size: (11 / @rootSize);
        margin-top: (5 / @rootSize);
      }
    }
    .property {
      color: #242424;
    }
  }
}